<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import chinaGEOJson from "./china.json";

const mapName = "chinaMap";
// 注册中国地图
echarts.registerMap(mapName, chinaGEOJson);

defineOptions({ name: "Demo01.vue" });

const echartsDomRef = ref();

function initComp(echartsDom) {
  const myChart = echarts.init(echartsDom);
  var option = {
    series: [
      {
        name: "中国地图",
        type: "map",
        map: mapName, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
        label: {
          // 去除hover时显示的省份名称
          show: false,
          fontSize: 0,
        },
      },
    ]
  };
  myChart.setOption(option);
}
onMounted(() => {
  const echartsDom = echartsDomRef.value;
  if (echartsDom) {
    initComp(echartsDom);
  }
});
</script>

<template>
  <div ref="echartsDomRef" style="height: 500px"></div>
</template>

<style lang="scss" scoped></style>
